<template>
  <div class="navi" :class="{ showLoading: showLoading }">
    <div class="icon">
      <i
        class="iconfont"
        v-for="(icon, index) in icons"
        :key="index"
        :class="[{ selected: index == selecte }, icon.icon]"
        @click="select(index)"
      ></i>
    </div>
    <div class="cancel" @click="changeShowPanelDrivingFalse();changeShowLoading()">×</div>
    <div class="input-list">
      <div class="input-item">
        <span>起</span>
        <input type="text" placeholder="请输入起点" v-model="startkeyword"/>
      </div>
      <div class="input-item">
        <span>终</span>
        <input type="text" placeholder="请输入终点" v-model="endkeyword"/>
      </div>
    </div>
    <button class="btn" @click="handleGoingTo">{{ goingTo[selecte] }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter.js'
import { storeToRefs } from 'pinia'

const {changeShowPanelDriving,changeShowPanelDrivingFalse,changeShowLoading } = useCounterStore()
const { showLoading } = storeToRefs(useCounterStore())

const startkeyword = ref('')
const endkeyword = ref('')
const selecte = ref(0)
const icons = ref([{ icon: 'icon-xiaoche' }, { icon: 'icon-bus' }, { icon: 'icon-walk' }])
const goingTo = ref(['开车去', '坐公交', '步行'])


function select(index) {
  selecte.value = index
}

const emit = defineEmits(['handleGoingTo'])
const handleGoingTo = () => {
  const start = startkeyword.value
  const end = endkeyword.value
  if (start && end) {
    let keyword = [start, end,selecte.value]
    emit('handleGoingTo', keyword)
  } else {
    alert('请输入起点和终点')
  }
}
</script>

<style lang="scss" scoped>
::placeholder {
  color: #ccc;
}
.navi {
  position: absolute;
  top: -230px;
  left: 10px;
  background: rgba(26, 134, 245);
  z-index: 200;
  padding: 20px 30px;
  transition: all 0.3s ease-in-out;
  &.showLoading {
    top: 10px;
  }
  .icon {
    display: flex;
    justify-content: space-around;
    color: #ddd;
    i {
      font-size: 25px;
      opacity: 0.5;
      &.selected {
        opacity: 1;
      }
    }
  }
  .cancel{
    position: absolute;
    top: 10px;
    right: 20px;
    color: #ddd;
    cursor: pointer;
  }
  .input-list {
    .input-item {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(8, 121, 235);
      padding: 5px;
      margin: 20px 0;
      font-size: 13px;
      span {
        color: #ccc;
      }
      input {
        width: 270px;
        height: 25px;
        background: rgb(8, 121, 235);
        border: none;
        outline: none;
        margin-left: 10px;
        color: #fff;
      }
    }
  }
  .btn {
    margin-left: 220px;
    background: rgb(72, 155, 238);
    border: none;
    outline: none;
    color: #fff;
    padding: 5px 20px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    &:hover {
      background: rgb(77, 152, 228);
      color: #ddd;
    }
  }
}
</style>
